掌握響應式圖片載入：發現 <picture> 元素的優勢

卡羅奇奇 2024-01-18 18:18:44 ‧ 425 瀏覽

分享至

`< picture >`

picture element支援度:Can I Use)

<picture> :常被用在RWD網站

功能
- 根據媒體條件 (media conditions) 自動載入不同的圖片。
- 根據瀏覽器對圖片格式 (format) 的支援度自動載入相容格式的圖片(ex.動態判斷載入 webp 或 jpeg)
架構

<picture>
  <!-- One or more source elements -->
  <source srcset="..." type="..." media="...">
  
  <!-- Fallback image for browsers that do not support picture element -->
  <img src="..." alt="...">
</picture>

<picture> 本身是一個容器 (container)，裡面會有零至多個 <source> 和一個 <img> 設定不同的圖片，瀏覽器會先從 <source> 去找有匹配條件的圖片，如果沒有的話 (或瀏覽器不支援 <picture> 標籤) 則使用 <img> 所設定的圖片。

`< source >`

source element支援度:Can I Use)
<source> 元素為 <picture>、<audio> 和 <video> 元素指定一個或多個媒體資源

<source> :主要用來設定不同條件下使用的圖片

屬性
- media:可以指定media query條件，當media query條件不吻合，瀏覽器會繼續往下比對下一個 <source> 或預設使用 <img> 所設定的圖片。
- srcset:
  - 指定一張或多張不同尺寸大小 (size) 的圖片，瀏覽器會自動判斷當在不同的螢幕寬度或不同的螢幕解析度，自動載入最合適大小的圖片(指定尺寸可以用實際圖片寬度或螢幕解析度來當單位)
  - srcset的語法是以空格分隔的'檔案路徑 URL 尺寸大小單位'，若有多張不同尺寸的圖片，則以逗點分隔。這裡w表示圖片的像素寬度，而x則表示螢幕解析度，如智慧型手機的Retina螢幕可能為2x、3x解析度。
- type:指定圖片的文件格式，可以利用type來做到不同瀏覽器載入不同格式的圖片。ex:用來說明這張圖是webp或jpeg的圖片，當瀏覽器不支援此格式時會自動忽略這張圖

<!-- Setting media in more source elements -->
<picture>
  <source srcset="test-wide.png" media="(min-width: 1200px)">
  <source srcset="test-mid.png" media="(min-width: 600px)">
  <img src="test-narrow.png">
</picture>

<!-- Setting size in source -->
<picture>
  <source srcset="test-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="test-480.png, logo-480-2x.png 2x">
  <img src="test-320.png">
</picture>

<!-- Setting type in source -->
<picture>
  <source srcset="test.webp" type="image/webp">
  <img src="test.png">
</picture>